<template>
    <div class="dashboard">
        <h2>封装axios加载狗狗图片数据：</h2>
        <el-image
            style="width: 100px; height: 100px"
            :src="dogs[0]"
            :preview-src-list="dogs"
            fit="cover">
        </el-image>
    </div>
</template>

<script>
import {ref, onMounted } from 'vue'
import dogApi from '@/api/dog'
import mitt from '@/utils/eventbus.js'
export default {
    setup () {
        console.log(this) // 看看setup中的this是啥：控制台打印的是 undefined
        const dogs = ref([])

        mitt.on('foo', e => console.log('foo', e) )

        onMounted (() => {
            dogApi.getDogs().then(res => {
                console.log(res)
                if (res.status === 'success') {
                    dogs.value = res.message
                }
            })
            mitt.emit('foo', { a: 'b' })
        })
        return {
            dogs
        }
    }
}
</script>

<style lang="scss" scoped>

</style>